
import React, { PropTypes, Component } from 'react';
import Table from './MyTable'
import Column from './Column'
import {myAjax, ROOTURL_TABLE, ROOTPATH} from './../publicAPI/publicAPI';
import styles from './SimpleTable.css';

export default React.createClass({
  getInitialState: function() {
    return {
      tData: [{}],
      processData: [{}],
      shopNames: [],
    };
  },
  componentWillMount: function() {
  	//console.log("执行了");
    let _this = this;
	fetch(ROOTURL_TABLE + 'cafune/servant/serdaystdata.api', { 
		method: 'GET',
		headers: { 
		    "Content-type": "application/x-www-form-urlencoded; charset=UTF-8" 
		},  
	})
	.then((response) => {
		//console.log(response);
		if (response.ok) {
			response.json().then(function(data) {
				console.log(data);
		      	let shopName = new Set();
		      	let processData = [];
		      	let ids = data.servantIds;
		      	//console.log(ids);
		      	//将数据按商店分成不同对象
		      	for (let i in ids) {
		        	let id = ids[i];
		        	//使用Set结构
		        	shopName.add(data[id].servantShop);
		      	}
		      	let shopNameArray = Array.from(shopName);
		      	shopNameArray.forEach((name) => {
		        	for (let i in ids) {
		          	let id = ids[i];
		          	if (data[id].servantShop == name) {
		           		processData.push(data[id]);
		         		}
		        	}
		      	});
		      	//console.log(processData);
		      	//数据处理，对象合并
		      	let serCounts = [];
		      	for(let i in processData) {
		      		let a = {'理发师id': processData[i].servantName, '所在理发店': processData[i].servantShop};
		      		let b = processData[i].dailyServeTypeCount;
		      		Object.assign(a, b);
		      		serCounts.push(a);
		      	}
		      	this.setState({
		      		tData: serCounts,
		        	processData: serCounts,
		        	shopNames: shopNameArray,
		      	});
			}.bind(_this));
		} else {
			console.log("Looks like the response wasn't perfect, got status", response.status);
		}

	})
	.catch(function (error) {
		alert("获取服务器内容失败");
		console.log('Request failed', error);
	});
  },
  onChange: function() {
    let shopName = this.refs.shopSelect.value;
    if(shopName == '请选择商店')  return; 
    let selectedShopData = [];
    this.state.processData.forEach((data) => {
      if(data['所在理发店'] == shopName) selectedShopData.push(data);
    });
    this.setState({tData: selectedShopData});
  },
  render: function() {
    return (
      <div className={styles['rt-wrap']}>
      	<div>
      		<select ref="shopSelect" onChange={this.onChange} className={styles['select']}>
	            <option>请选择商店</option>
	            {
	              this.state.shopNames.map((name) => {
	                return (
	                  <option value={name}>{name}</option>
	                );
	              })
	            }
            </select>
      	</div>
        <Table data={this.state.tData} className={styles.container}>
          { //箭头函数返回一个对象时，用圆括号表示
            //设置是否开启排序，捞一点就用手动咯
            Object.keys(this.state.tData[0]).map(entry => {
              if(/\D/g.test(entry)) {
                if(/理发师id/.test(entry) || /所在理发店/.test(entry)) {
                  //console.log(entry);
                  return <Column dataKey={entry} name={entry} width="400px" order="false" key={`col-${entry}`}/>
                } else {
                  //console.log(entry);
                  return <Column dataKey={entry} name={entry} width="400px" key={`col-${entry}`}/>
                }
              } else {
                return <Column dataKey={entry} name={entry} key={`col-${entry}`}/>
              }
              
            })
          }
        </Table>
      </div>
    );
  }
});